<script setup>
import { ref } from "vue"
import { useDataStore } from "@/stores/data"
import { storeToRefs } from "pinia"

const dataStore = useDataStore()
const { tableData } = storeToRefs(dataStore)
const show = ref(false)
const saveIndex = ref(0)
const disabled = ref(false)
const buttonCount = ref(0)
const form = ref({
	title: null,
	content: null,
	type: null,
})
const handleClick = (type, index, row) => {
	// console.log(type, index, row)
	if (type == "add") {
		show.value = true
		form.value.title = null
		form.value.content = null
		form.value.type = "add"
		saveIndex.value = 0
		disabled.value = false
		buttonCount.value = 2
	} else if (type == "delete") {
		ElMessageBox.confirm("Delete this note?", "Warning", {
			confirmButtonText: "OK",
			cancelButtonText: "Cancel",
			type: "warning",
		})
			.then(() => {
				ElMessage({
					type: "success",
					message: "Delete completed",
				})
				tableData.value.splice(index, 1)
			})
			.catch(() => {
				ElMessage({
					type: "info",
					message: "Delete canceled",
				})
			})
	} else {
		show.value = true
		form.value.title = row.title
		form.value.content = row.content
		saveIndex.value = index
		if (type == "edit") {
			form.value.type = "edit"
			disabled.value = false
			buttonCount.value = 2
		} else if (type == "detail") {
			disabled.value = true
			buttonCount.value = 1
		}
	}
}

const handleSubmit = (formData) => {
	show.value = false
	if (formData.type == "edit") {
		// 将formData中的数据更新到tableData中
		tableData.value[saveIndex.value].date = new Date().toLocaleString()
		tableData.value[saveIndex.value].title = formData.title
		tableData.value[saveIndex.value].content = formData.content
		ElMessage({
			type: "success",
			message: "Edit completed",
		})
	} else if (formData.type == "add") {
		// 将formData中的数据添加到tableData中
		tableData.value.unshift({
			date: new Date().toLocaleString(),
			title: formData.title,
			content: formData.content,
		})
		ElMessage({
			type: "success",
			message: "Add completed",
		})
	}
}
</script>

<template>
	<div class="container">
		<div class="header">
			<h1>小黑的网页笔记本</h1>
			<el-button
				class="add-btn"
				type="primary"
				@click="handleClick('add', 0, {})">
				+
			</el-button>
		</div>
		<div class="search"></div>
		<div class="body">
			<el-table
				:data="tableData"
				height="520"
				style="width: 100%">
				<el-table-column
					prop="date"
					label="Date"
					width="130" />
				<el-table-column
					prop="title"
					label="Title"
					width="200" />
				<el-table-column>
					<template #default="{ $index, row }">
						<el-button
							link
							type="primary"
							size="small"
							@click="handleClick('detail', $index, row)">
							Detail
						</el-button>
						<el-button
							link
							type="primary"
							size="small"
							@click="handleClick('edit', $index, row)">
							Edit
						</el-button>
						<el-button
							link
							type="danger"
							size="small"
							@click="handleClick('delete', $index, row)">
							Delete
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<EditPage
			v-if="show"
			:disabled="disabled"
			:form="form"
			:buttonCount="buttonCount"
			@close="show = false"
			@submit="handleSubmit" />
	</div>
</template>

<style lang="scss" scoped>
.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 600px;
	background-color: #f5f5f5;
	border-radius: 10px;
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		h1 {
			margin-left: 50px;
			text-align: center;
			margin-bottom: 10px;
		}
		.add-btn {
			margin-right: 50px;
		}
	}

	.body {
		margin: 0 5px;
	}
}
</style>
